<template>
  <div class="box">
    <to-back :title="'商品列表'" @update-page="updatePage"></to-back>
    <div class="listbox globelbox">
      <div class="titlebox">
        <div>
          <el-button type="primary" plain v-for="item in goodsState" :key="item.id" @click="filterState"
            >{{ item.title }} ( <span>{{ item.number }} </span> )
          </el-button>
        </div>
      </div>

      <my-search-box>
        <template v-slot:btn>
          <el-button size="small" type="info">查询结果</el-button>
          <el-button size="small" type="info" @click="searchTremShow">高级检索</el-button>
        </template>

        <template v-slot:left>
          <span class="title">输入搜索:</span>
          <el-input size="mini" v-model="goodsNameVal" placeholder="商品名称/货号名称"></el-input>
        </template>

        <template v-slot:cont>
          <span class="title">商品分类:</span>
          <!-- <el-select size="mini" v-model="goodsSortVal" placeholder="请选择商品分类">
              <el-option> </el-option>
            </el-select> -->
        </template>

        <template v-slot:right>
          <span class="title">商品品牌:</span>
          <!-- <el-select size="mini" v-model="goodsBrandVal" placeholder="请选择品牌">
              <el-option> </el-option>
            </el-select> -->
        </template>
      </my-search-box>

      <my-table-title>
        <slot>
          <el-button type="info" size="mini" plain>修改基本信息</el-button>
          <el-button type="info" size="mini" plain>修改商品详细</el-button>
        </slot>
      </my-table-title>

      <!-- 弹出层 -->
      <el-dialog title="高级检索" :visible.sync="isDialogShow" width="30%" :before-close="dialogClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isDialogShow = false">取 消</el-button>
          <el-button type="primary" @click="isDialogShow = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  props: ['num', 'id'],
  data() {
    return {
      goodsState: [],
      goodsList: [],
      goodsNameVal: '',
      goodsSortVal: {},
      goodsBrandVal: {},
      isIconShow: false,
      isDialogShow: false
    }
  },
  methods: {
    updatePage() {
      alert('父组件收到了')
    },
    async getGoodsList() {
      const { data: res } = await this.$axios.get('/goods/goodsList')
      console.log('商品列表数据', res)
      if (res.status !== 200) return this.$message.error('商品列表数据获取失败')
      const { goodsState, goodsList } = res.body
      this.goodsState = goodsState
      this.goodsList = goodsList
    },
    // 商品状态切换时触发
    filterState() {},
    // 关闭盒子触发
    dialogClose() {
      this.isDialogShow = false
    },
    searchTremShow() {
      this.isDialogShow = true
    }
  },
  created() {
    this.getGoodsList()
    console.log(this.$route.params.id, this.$route.params.num, 'goodsList')
  }
}
</script>

<style lang="less" scoped>
.listbox {
  .titlebox {
    padding: 15px 0;
    .el-button {
      padding: 9px 15px;
      font-size: 12px;
    }
    span {
      color: red;
    }
  }
}

.el-button {
  font-size: 12px;
}
</style>
